<template>
	<el-layout>
		<el-navbar v-model:top="navTop" :placeholder="true" :fixed="true" :border="false" title="我的优惠券"></el-navbar>
		<view class="tabs" :style="{ top: (navTop - 1) + 'px' }">
			<el-tabs :list="tabList" :current="current" @change="onTabs" activeColor="var(--ui-bg-color)" :itemStyle="{width: '33.333%'}"></el-tabs>
		</view>
		<view style="width: 100%; height: 50px;"></view>
		
		<el-refresh ref="refreshRef" @refresh="refresh" @scrolltolower="scrolltolower" :scrollHeight="getScrollHeight">
			
			<view class="wrapper">
				<view class="coupon-list">
					<view class="coupon-item" v-for="(item,index) in list" :key="index">
						<view class="coupon-box" :class="{'grey' : inArray(item.status,[2,3])}">
							<view class="top-type" :class="{'grey' : inArray(item.status,[2,3])}">{{ item.type == 1 ? "满减券" : "折扣券" }}</view>
							<view class="l">
								<view class="price">
									<text class="prefix" v-if="item.type == 1">￥</text>
									<text class="money">{{ item.amount }}{{ item.type == 2 ? "折" : "" }}</text>
								</view>
								<view class="discount">满{{ item.order_amount }}元可用</view>
							</view>
							<view class="line"></view>
							<view class="content">
								<view class="title">{{ item.name }}</view>
								<view class="bottom">
									<view class="time" v-if="item.expire_type == 1">领取后{{ item.time }}天内有效</view>
									<view class="time" v-if="item.expire_type == 2">{{ item.time }}当天有效</view>
									<view class="receive" v-if="item.status == 1">未使用</view>
									<view class="receive" v-if="item.status == 2">已使用</view>
									<view class="receive" v-if="item.status == 3">已过期</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</el-refresh>
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { nextTick,ref,computed } from "vue";
	import { inArray } from "@/el-ui/libs/check";
	
	const refreshRef  = ref();
	const navTop 	  = ref(0);
	const current 	  = ref(0);
	
	const tabList = ref([
		{name: "未使用"},
		{name: "已使用"},
		{name: "已过期"}
	]);
	
	onLoad(()=>{
		nextTick(()=>{
			init();
		})
	});
	
	const list = ref([]);
	const init = async ()=>{
		refreshRef.value?.resetPage();
	}
	
	const onTabs = (value)=>{
		current.value = value;
		init();
	}
	
	const getScrollHeight = computed(()=>{
		const { windowHeight } = uni.getSystemInfoSync();
		return (windowHeight - navTop.value) - 50;
	})
	
	/**
	 * 下拉刷新
	 */
	const refresh = ()=>{
		init();
	}
	
	/**
	 * 上拉加载
	 */
	const scrolltolower = (data)=>{
		if(refreshRef.value.isMore()) {
			refreshRef.value.loadingPage();

			setTimeout(() => {
				uni.$http.get("ucenter.coupon/index",{ active: current.value, page: data.page }).then(res=>{
					if(res.code == 1){
						if(data.page == 1) list.value = [];
						refreshRef.value.setData(res.data.total,res.data.list.length);
						list.value = list.value.concat(res.data.list);
					}else if(res.code == -1){
						if(data.page == 1 && res.data.list.length <= 0) list.value = [];
						refreshRef.value.emptyPage();  
					}
				});
			}, 100)
		}
	}
	
</script>

<style lang="scss" scoped>
	.tabs {
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 100000;
	}
	.wrapper {
		padding: 20rpx;
		.coupon-list {
			.coupon-item {
				position: relative;
				overflow: hidden;
				margin-bottom: 11px;
				.coupon-box {
					background: linear-gradient(-128deg, #ff6d6d, #ff3636);
					&.grey {
						background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
					}
					width: 100%;
					display: flex;
					border-radius: 4px;
					color: #fff;
					height: 90px;
					.top-type {
						position: absolute;
						top: 0;
						right: 0;
						z-index: 10;
						width: 64px;
						padding: 3px 0;
						background: #a771ff;
						font-size: 10px;
						text-align: center;
						color: #fff;
						-webkit-transform: rotate(45deg);
						transform: rotate(45deg);
						-webkit-transform-origin: 32px 32px;
						transform-origin: 32px 32px;
						&.grey {
							background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
						}
					}
					.l {
						display: flex;
						flex-direction: column;
						justify-content: center;
						position: relative;
						flex: 0 0 32%;
						text-align: center;
						border-radius: 0 8px 8px 0;
						.price {
							.prefix {
								font-size: 30rpx;
								display: inline;
							}
							.money {
								display: inline;
								font-weight: 700;
								font-size: 52rpx;
							}
						}
						.discount {
							font-size: 24rpx;
						}
					}
					.line {
						position: relative;
						flex: 0 0 0;
						border-left: 2px solid #fff;
						margin: 0 5px 0 3px;
						background: #fff;
						border-radius: 8px 8px 0 0;
						bottom: 0;
						&::before {
							border-radius: 0 0 8px 8px;
							top: 0;
							content: "";
							position: absolute;
							width: 12px;
							height: 6px;
							background: #f7f7f7;
							left: -7px;
							z-index: 1;
						}
						&::after {
							border-radius: 8px 8px 0 0;
							bottom: 0;
							content: "";
							position: absolute;
							width: 12px;
							height: 6px;
							background: #f7f7f7;
							left: -7px;
							z-index: 1;
						}
					}
					.content {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex: 1;
						padding: 15px 10px;
						border-radius: 8px 0 0 8px;
						.title {
							font-size: 32rpx;
						}
						.bottom {
							display: flex;
							align-items: center;
							justify-content: space-between;
							.time{
								font-size: 24rpx;
							}
							.receive {
								height: 23px;
								width: 61px;
								line-height: 23px;
								text-align: center;
								border-radius: 15px;
								color: #fff;
								font-size: 12px;
							}
						}
					}
				}
			}
		}
	}
</style>